<template>
  <div>
    <div class="header-inner bg-dark position-fixed" :class="{ whiteNav: isActive }">
      <div
        class="row w-100 h-100 d-flex justify-content-md-center justify-content-evenly align-items-center justify-content-lg-evenly">
        <!--   网站图标 -->
        <div class="col-2  col-md-0 col-lg-2  d-none  d-lg-block">
          <div class="log navbar-brand fw-bold fs-1  hvr-bounce-in " style="color: #fff">
            <slot name="logo">校园＆生活</slot>
          </div>
        </div>
        <!-- 导航列表 -->
        <div class="col-auto d-md-flex justify-content-center d-md-block d-sm-none d-none">
          <nav class="nav position-relative ">
            <slot name="nav-item"></slot>
          </nav>
        </div>

        <!-- 导航菜单按钮 -->
        <div class="col-2 d-sm-block d-md-none   ">
          <i @click="drawerShow" class="bi bi-list" style="color: #fff; font-size: 2.2em"></i>
        </div>
        <!-- 导航btn -->
        <div class="col-2   ">
          <slot name="login"></slot>
        </div>

        <!-- 导航侧边栏 -->

        <div class="drawer ">
          <el-drawer title="Menu List" :visible.sync="drawer" :direction="direction" :modal="false">
            <span class="nav d-flex  flex-column">
              <slot name="nav-item"></slot>
            </span>
          </el-drawer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  // 组件挂载后添加监听事件
  data() {
    return {
      input: "",
      isActive: true,
      isShow: false,
      drawer: false,
      searchDrawer: false,
      direction: "rtl",
      directionttb: "ttb",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 我这里监听的是侧边的滚动条
    handleScroll: function () {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 200) this.isActive = true;
      else {
        this.isActive = false;
      }
    },
    drawerShow() {
      this.drawer = !this.drawer;
    },
    searchShow() {
      this.searchDrawer = !this.searchDrawer;
    },
    search() { },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header-inner {
  width: 100%;
  height: 6.25rem;
  top: 0;
  z-index: 30;
  transition: all 0.5s;
  border-bottom: 1px solid rgb(233, 229, 229);

  .row {
    margin-left: 0;
  }
}

[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-left: 0.5em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input {
  background: rgb(13, 17, 23);
  color: #f4a460;
}

.whiteNav {
  background: #fff !important;
  height: 110px;
}

.whiteNav .log {
  color: rgb(13, 17, 23) !important;
}

.whiteNav .nav a,
.whiteNav .search i,
.whiteNav .bi-list,
.whiteNav .login {
  color: rgb(13, 17, 23) !important;
}

.whiteNav .login:hover {
  color: #ffff !important;
}

.login {
  color: #fff;
}

.submenu {
  background: #fff;
  transform: rotateX(90deg);
  transform-origin: top;
  top: 73px;
  padding: 0.8rem 1.8rem !important;
}

.submenu li a {
  color: #fff;
  text-decoration: none;
  text-align: center;
}

@media (max-width: 768px) {
  .fs-1 {
    font-size: 1.375rem !important;
  }
}
</style>
